import React, { Component } from 'react';

import {NavBar} from 'antd-mobile'
import "../styles/Login.css"

import {user_login} from "../api/index"
class MyLogin extends Component {
    constructor(props){
        super(props);
        this.state={
            phone:'18891315974',
            pass:'123456',
            bool:false
        }
    }
    back(){
        this.props.history.goBack()
    }
    handleChange(e){
        // setState异步的
        this.setState({
            [e.target.name]:e.target.type=='checkbox'?e.target.checked:e.target.value, // eslint-disable-line
        },()=>{
        // console.log(this.state.phone,"里");
        })
        // console.log(this.state.phone,"外");
    }
    logging(){
        if(
            this.state.phone != "" && // eslint-disable-line
            this.state.pass != "" // eslint-disable-line
        ){
            if (this.state.bool==true) { // eslint-disable-line
                user_login({phone:this.state.phone,pass:this.state.pass}).then((res)=>{
                    console.log(res);
                    localStorage.setItem('token',res.data.token)
                    localStorage.setItem('phone',this.state.phone)
                    localStorage.setItem("userid",res.data.userinfo.id)
                    localStorage.setItem("pic",res.data.userinfo.avatarUrl)
                    // 跳转到首页
                    alert("登录成功")
                    this.props.history.push("/index")
                }) 
            }else{
                alert("请勾选协议！！！")
            }

                
        }
    }
    // 注册
    goReg(){
        this.props.history.push("/register")
    }
    render() {
        return (
            <div className='login'>
                {/* <h2>会员购登录</h2> */}
                <NavBar onBack={()=>{ this.back() }}>登录</NavBar>
                {/* 表单元素的值不受当前组件状态控制===========不受控组件 */}
                <input name='phone' type="text" placeholder='输入账号' value={this.state.phone} onChange={(e)=>{this.handleChange(e)}}/>
                <br />
                <input name='pass' type="text" placeholder='输入密码' value={this.state.pass} onChange={(e)=>{this.handleChange(e)}}/>
                <br />
                <div className="fuxuan">
                    <input name='bool' type="checkbox" checked={this.state.bool} onChange={(e)=>{ this.handleChange(e) }}/>勾选用户登录协议
                </div>
                <br />
                <button onClick={()=>{this.logging()}}>登录</button>
                <button onClick={()=>{this.goReg()}}>注册</button>
            </div>
        );

    }
}

export default MyLogin;
